<template>
  <my-layout sTitle="商品" :isShowLeft="false">
    <div slot="content">
      <div class="w-goods">
        <div class="w-goods-header">
          <div class="w-goods-searchs">
            <div class="w-goods-search-inputs">
              <img src="@/assets/images/search.png" alt>
              <input class="input-search" type="text" v-model="wordKey" placeholder="请输入商品名称进行搜索">
            </div>
            <div class="w-goods-search-text" @click="searchGoods">搜索</div>
          </div>
          <v-filter/>
        </div>
        <div class="w-goods-content">
          <div class="w-goods-list">
            <div
              class="w-goods-items"
              v-for="(item,i) in goodList"
              :key="i"
              @click="goPageDetail(item.id)"
            >
              <div class="w-goods-item-inner">
                <img :src="item.logo" alt>
                <div class="w-goods-item-name">{{item.titile}}</div>
                <div class="w-goods-item-price">
                  <span>¥{{item.price}}</span>
                  <!-- <span>¥689</span> -->
                </div>
              </div>
            </div>
          </div>
          <div
            v-infinite-scroll="loadMore"
            infinite-scroll-disabled="busy"
            infinite-scroll-distance="1"
            class="footer-txt"
          >
            <!-- <span>没有更多了</span> -->
          </div>
        </div>
      </div>
    </div>
    <my-footer slot="footers"></my-footer>
  </my-layout>
</template>
<script>
import VFilter from "./components/filter";
export default {
  data() {
    return {
      goodList: [],
      pageNum: 1,
      wordKey: "",
      busy: false,
      total: 0
    };
  },
  components: { VFilter },
  methods: {
    // 获取商品列表
    async getDataList() {
      const { data } = await this.$http.post("goods/finds", {
        key: this.wordKey,
        pageNum: this.pageNum++
      });
      if (data.code == 0) {
        this.goodList.push(...data.goods);
        this.total = data.total;
      }
    },
    goPageDetail(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id
        }
      });
    },
    // 搜索
    searchGoods() {
      this.pageNum = 1;
      this.goodList = [];
      this.busy = false;
      this.getDataList();
    },
    // 下拉加载
    loadMore() {
      this.busy = false;
      this.getDataList();
      if (this.goodList.length == this.total && this.goodList.length != 0) {
        this.busy = true;
      }
    }
  },
  mounted() {
    this.wordKey = this.$route.query.wordKey;
  }
};
</script>
<style lang="scss">
.w-goods {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0 48px;
  .w-goods-searchs {
    margin-top: 24px;
    padding: 0 24px;
    display: flex;
    line-height: 80px;
    .w-goods-search-inputs {
      height: 80px;
      background: #f7f7f7;
      border-radius: 14px;
      flex: 1;
      color: #7f7f7f;
      font-size: 28px;
      padding-left: 40px;

      img {
        vertical-align: middle;
        margin-top: -5px;
      }

      .input-search {
        border: none;
        line-height: 80px;
        background: none;
        outline: none;
        padding-left: 48px;
        width: 520px;
      }
    }
    .w-goods-search-text {
      padding-left: 24px;
      color: #5252a1;
      font-size: 32px;
    }
  }

  .w-goods-content {
    flex: 1;
    // overflow: auto;
    // padding: 0 24px;
  }
  .w-goods-items {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 500px;
    border-bottom: 2px solid #e5e2e2;

    .w-goods-item-inner {
      height: 320px;
    }
    img {
      width: 320px;
      height: 320px;
      display: block;
      margin: 40px auto 16px;
    }
    .w-goods-item-name {
      font-size: 28px;

      font-weight: 500;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      text-align: center;
    }
    .w-goods-item-name,
    .w-goods-item-price {
      text-align: center;
    }
    .w-goods-item-price {
      font-size: 28px;
      color: #d0021b;
      margin-top: 24px;
      span:nth-child(2) {
        color: #9b9b9b;
        margin-left: 36px;
        text-decoration-line: line-through;
      }
    }
  }

  .w-goods-items:nth-child(odd) {
    border-right: 2px solid #e5e2e2;
  }
  .w-goods-items:nth-child(even) {
    margin-left: -2px;
  }
}
</style>
